<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1300" destroy-on-close @closed="$emit('closed')" align-center>
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="120px" label-position="right" style="height:700px;overflow:auto;">
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="物料编码" prop="goods_code">
                        <el-input v-model="form.goods_code" placeholder="请输入物料编码(不填写自动生成)" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物料名称" prop="goods_name">
                        <el-input v-model="form.goods_name" placeholder="请输入物料名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物料分类" prop="cate_id">
                        <el-select v-model="form.cate_id" filterable style="width: 100%" placeholder="请选择物料分类">
                            <el-option v-for="item in cateList" :key="item.id" :label="item.cate_name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="规格型号" prop="goods_spec">
                        <el-input v-model="form.goods_spec" placeholder="请输入规格型号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计量单位" prop="unit_id">
                        <el-select v-model="form.unit_id" filterable style="width: 100%" placeholder="请选择计量单位" @change="unitChange">
                            <el-option v-for="item in unitList" :key="item.id" :label="item.unit_name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="购买方式" prop="pay_type">
                        <el-select v-model="form.pay_type" filterable style="width: 100%" placeholder="请选择购买方式">
                            <el-option label="自制" :value="1" />
                            <el-option label="外购" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="启用多计量" prop="is_unit">
                        <el-switch v-model="form.is_unit" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="生产/委外单位" prop="pro_unit_id">
                        <el-select v-model="form.pro_unit_id" filterable style="width: 100%" placeholder="请选择生产/委外单位">
                            <el-option v-for="item in unitList" :key="item.id" :label="item.unit_name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="报表辅助单位" prop="rep_unit_id">
                        <el-select v-model="form.rep_unit_id" filterable style="width: 100%" placeholder="请选择报表辅助单位">
                            <el-option v-for="item in unitList" :key="item.id" :label="item.unit_name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="物料可销售" prop="is_sale">
                        <el-switch v-model="form.is_sale" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物料可采购" prop="is_pro">
                        <el-switch v-model="form.is_pro" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="允许超订单入库" prop="is_in">
                        <el-switch v-model="form.is_in" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="创建人" prop="create_admin_id">
                        <el-select v-model="form.create_admin_id" filterable clearable placeholder="请选择创建人" style="width:100%">
                            <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间" prop="create_date">
                        <el-date-picker v-model="form.create_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="修改人" prop="save_admin_id">
                        <el-select v-model="form.save_admin_id" filterable clearable placeholder="请选择修改人" style="width:100%">
                            <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="修改时间" prop="save_date">
                        <el-date-picker v-model="form.save_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="禁用人" prop="dis_admin_id">
                        <el-select v-model="form.dis_admin_id" filterable clearable placeholder="请选择禁用人" style="width:100%">
                            <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="禁用时间" prop="dis_date">
                        <el-date-picker v-model="form.dis_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
             <el-form-item label="物料图片" prop="goods_image">
                <sc-upload-multiple v-model="form.goods_image" :limit="6" draggable></sc-upload-multiple>
            </el-form-item>
            <el-col :span="12">
                <el-form-item prop="unit_all" v-if="form.is_unit == 1">
                    <sc-form-table ref="table" v-model="form.unit_all" :addTemplate="addTemplate" placeholder="暂无数据">
                        <el-table-column prop="name" label="副单位" align="center">
                            <template #default="scope">
                                <el-select v-model="scope.row.unit_id" filterable style="width: 100%" placeholder="请选择单位">
                            <el-option v-for="item in unitList" :key="item.id" :label="item.unit_name" :value="item.id" />
                        </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column width="50">=</el-table-column>
                        <el-table-column prop="ratio" label="换算比例" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.ratio" placeholder="换算比例"/>
                            </template>
                        </el-table-column>
                        <el-table-column width="50" align="center">{{ units }}</el-table-column>
                    </sc-form-table>
                </el-form-item>
            </el-col>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增物料',
				edit: '编辑物料',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
                id:"",
				goods_code: "",
				goods_name: "",
				cate_id: "",
				goods_spec: "",
				unit_id: "",
				pay_type: "",
				is_unit: "",
				pro_unit_id: "",
				rep_unit_id: "",
                is_sale:0,
                is_pro:0,
                is_in: 0,
                goods_image:"",
                unit_all:[],
                create_admin_id:"",
                save_admin_id:"",
                dis_admin_id:"",
                create_date:"",
                save_date:"",
                dis_date:"",
			},
			//验证规则
			rules: {
				goods_name: [{ required: true, message: '请输入物料名称' }],
				goods_code: [{ required: true, message: '请输入物料编号' }],
				cate_id: [{ required: true, message: '请选择分类' }],
			},
            addTemplate:{},
            units:"",
            unitList:[],
            cateList:[],
            clientList:[],
		}
	},
	mounted() {
        this.getUnit() // 单位
        this.getCate()  //分类
        this.getUser()  //创建人
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.device.beiJian.goods.edit.post(this.form);
					} else {
						res = await this.$API.device.beiJian.goods.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
            this.form.id = data.id
            var res = await this.$API.device.beiJian.goods.detail.get({id:data.id});
            this.form.goods_code = data.goods_code
            this.form.goods_name = data.goods_name
            this.form.cate_id = data.cate_id
            this.form.goods_spec = data.goods_spec
            this.form.unit_id = data.unit_id
            this.form.pay_type = data.pay_type
            this.form.is_unit = data.is_unit
            this.form.pro_unit_id = data.pro_unit_id
            this.form.rep_unit_id = data.rep_unit_id
            this.form.is_sale = data.is_sale
            this.form.is_pro = data.is_pro
            this.form.is_in = data.is_in
            this.form.goods_image = data.goods_image!=''? res.data.goods_image:''
            let array = []
            data.unit_all.map(item=>{
                array.push({
                    unit_id:Number(item.unit_id),
                    ratio:item.ratio
                })
            })
            this.form.unit_all = array
            this.form.create_admin_id = data.create_admin_id
            this.form.save_admin_id = data.save_admin_id
            this.form.dis_admin_id = data.dis_admin_id
            this.form.create_date = data.create_date
            this.form.save_date = data.save_date
            this.form.dis_date = data.dis_date
            this.unitList.map(item=>{
                if(data.unit_id==item.id){
                    this.units = item.unit_name
                }
            })
		},
        // 获取分类
        async getCate(){
            var res = await this.$API.all.getBeiCate.get();
            this.cateList = res.data
        },
        // 获取单位
        async getUnit(){
            var res = await this.$API.all.getBeiUnit.get();
            this.unitList = res.data
        },
        // 获取人员
        async getUser(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.clientList = res.data;
        },
        unitChange(e){
            this.unitList.map(item=>{
                if(e==item.id){
                    this.units = item.unit_name
                }
            })
        },
        // 单位
        // async getUnit() {
        //     var res = await this.$API.common.getDictData.get({type: 'unit' });
        //     let array = []
        //     res.data.unit.map(item=>{
        //         array.push({
        //             id:Number(item.value),
        //             title:item.name
        //         })
        //     })
        //     this.unitLIst = array
        // },
	}
}
</script>

<style></style>
